<template>
	<view class="news">
		<view class="swiper">
			<u-swiper height="350" :list="imgList"></u-swiper>
		</view>
		<view class="waterfall">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="warter" v-for="(p, i) in leftList" :key="i" @click="showMore(p)">
						<u-lazy-load threshold="-450" border-radius="10" :image="p.image" :index="i"></u-lazy-load>
						<view class="warter-title">
							{{p.title}}
						</view>
						<u-icon v-if="false" name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(p.id)"></u-icon>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="warter" v-for="(p, i) in rightList" :key="i" @click="showMore(p)">
						<u-lazy-load threshold="-450" border-radius="10" :image="p.image" :index="i"></u-lazy-load>
						<view class="warter-title">
							{{p.title}}
						</view>
						<u-icon v-if="false" name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(p.id)"></u-icon>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [{
						image: '/static/image/newsBanner.jpg',
						title: '明眸彗眼文章'
					},
					{
						image: '/static/image/newsBanner.jpg',
						title: '明眸彗眼文章'
					},
				],
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					{
						title: '明眸彗眼文章1',
						image: '/static/image/article.jpg',
					},
					{
						title: '明眸彗眼文章2',
						image: '/static/image/article1.jpg',
					},
					{
						title: '明眸彗眼文章3',
						image: '/static/image/article.jpg',
					},
					{
						title: '明眸彗眼文章4',
						image: '/static/image/article1.jpg',
					},
					{
						title: '明眸彗眼文章5',
						image: '/static/image/article.jpg',
					},
					{
						title: '明眸彗眼文章6',
						image: '/static/image/article1.jpg',
					},
					{
						title: '明眸彗眼文章7',
						image: '/static/image/article.jpg',
					},
					{
						title: '明眸彗眼文章8',
						image: '/static/image/article1.jpg',
					},
					{
						title: '明眸彗眼文章9',
						image: '/static/image/article.jpg',
					},
					{
						title: '明眸彗眼文章10',
						image: '/static/image/article1.jpg',
					},
					{
						title: '明眸彗眼文章11',
						image: '/static/image/article.jpg',
					},
				]
			}
		},
		onLoad() {
			this.addRandomData()
		},
		onReachBottom() {
			uni.showLoading({
				title: '获取文章列表'
			})
			this.loadStatus = 'loading'
			// 加载更多
			setTimeout(() => {
				uni.hideLoading()
				this.addRandomData()
				this.loadStatus = 'loadmore'
			}, 1000)
		},
		methods: {
			showMore(p) {
				uni.navigateTo({
					url: `/pages/articleDetail/articleDetail?t1=${p.title}`,
				})
			},
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1)
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid()
					this.flowList.push(item)
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id)
			},
			clear() {
				this.$refs.uWaterfall.clear()
			}
		}
	}
</script>

<style scoped lang="scss">
	.news {
		.waterfall {
			margin: $uni-spacing-col-sm;
			.warter {
				border-radius: 8px;
				margin: 16rpx $uni-spacing-col-sm;
				background-color: #fff;
				padding: 8px;
				position: relative;
			}
			.u-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}
			.warter-title {
				font-size: 30rpx;
				margin-top: 5px;
				color: $u-main-color;
			}
		}
	}
</style>
